<template>
  <div class="form_el">
    <van-form @submit="onSubmit">
      <div class="form_item_el">
        <van-field v-model="login.username" name="username" label="用户" placeholder="账号名/邮箱/手机号"
                   :rules="[{ required: false, message: '请填写用户名' }]" ref="loginText"
                   @keydown.esc.native="closeLogin"/>
        <van-field v-model="login.password" type="password" name="password" label="密码" placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"/>
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">{{ loginCenter }}</van-button>
        </div>
      </div>
    </van-form>

    <div class="form_checkbox">
      <el-checkbox v-model="login.checked">记住我</el-checkbox>
    </div>

    <div class="from_link">
      <el-link href="https://element.eleme.io" target="_blank">忘记密码？</el-link> &nbsp
      <el-link type="primary">忘记账号</el-link>  &nbsp&nbsp&nbsp
      <el-link type="success">更多>></el-link>
    </div>
  </div>


</template>

<script>
import { wuYong } from "@/api/login";
import Cookies from "js-cookie";
import {Message} from "element-ui";
export default {
  name: "FormLogin",
  mounted() {
    // alert(this.$refs.loginText);
    this.$refs.loginText.focus();   //
  },
  data() {
    return {
      login: {
        username: '',
        password: '',
        checked: false,
        uuid: ""
      },
      loginCenter: '登 录',
    };
  },
  created() {
    this.getCookie();
  },
  methods: {
    closeLogin() {
      // alert('dsf');
      this.showBack = false;
      this.$emit('closeLogin',this.showBack);
    },
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const checked = Cookies.get('checked')
      this.login = {
        username: username === undefined ? this.login.username : username,
        password: password === undefined ? this.login.password : decrypt(password),
        checked: checked === undefined ? false : Boolean(checked)
      };
    },
    onSubmit(values) {
      if (values.username === "" || values.username === undefined){
        Message.info({
          message: '用户名不能为空！',
        })
      }else {
        //发送请求   验证用户名密码
        if(this.login.checked){
          Cookies.set('username', this.login.username, { expires: 30 })   // 30天
          Cookies.set('password', this.login.password, { expires: 30 })
          Cookies.set('checked', this.login.checked, { expires: 30 })
        }else{
          Cookies.remove('username');
          Cookies.remove('password');
          Cookies.remove('checked');
        }
        // wuYong();
        this.loginCenter = '登 录 中...'
        this.$store.dispatch('Login', this.login).then((res) => {
          // console.log(res);
          this.$router.push({
            path: '/'
          }).catch(()=>{this.loginCenter = '登 录'})
          this.loginCenter = '登 录'
        }).catch((err) => {
           this.loginCenter = '登 录'
          Message.error({message: '登录失败'})
        })
        // console.log('submit', values);
        // console.log(this.login.checked)
      }
    },
  }
}
</script>

<style scoped>

.form_el {
  width: 350px;
  height: 350px;
  margin-top: 30px;
}
.from_link {
  position: absolute;
  bottom: 100px;
  left: 140px;
}
</style>
